﻿@{
    ViewData["Title"] = "调拨单详情";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="app" class="transfer-detail" data-transfer-order-id="@Model?.TransferOrderId">
    <!-- 加载状态 -->
    <div class="loading-mask" id="loadingMask">
        <div class="loading-content">加载中...</div>
    </div>

    <!-- 错误提示 -->
    <div class="alert alert-error" id="errorAlert" style="display: none;">
        <span class="alert-message" id="errorMessage"></span>
        <button class="alert-close" onclick="document.getElementById('errorAlert').style.display='none'">×</button>
    </div>

    <!-- 主内容区 -->
    <div class="card" id="transferCard" style="display: none;">
        <!-- 头部：单号 + 操作按钮（打印按钮后新增返回列表按钮） -->
        <div class="header-container">
            <div class="header-content">
                <div class="order-info">
                    <div class="order-no">
                        <span class="label">调拨单号：</span>
                        <span class="value" id="transferOrderNo">@Model?.TransnoNo</span>
                    </div>
                </div>
                <div class="header-actions">
                    <button class="btn btn-default" id="printBtn">打印</button>
                    <!-- 新增：返回列表按钮（放在操作按钮区最后） -->
                    <button class="btn btn-default" id="returnListBtn">返回列表</button>
                  
                </div>
            </div>
        </div>

        <!-- 基础信息区域 -->
        <div class="base-info">
            <div class="info-section">
                <div class="info-row">
                    <div class="info-item">
                        <div class="info-label">制单人</div>
                        <div class="info-value" id="makerName">@(Model?.MakerName ?? "-")</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">所在部门</div>
                        <div class="info-value" id="departmentName">@(Model?.DepartmentName ?? "-")</div>
                    </div>
                </div>

                <div class="info-row">
                    <div class="info-item">
                        <div class="info-label">制单时间</div>
                        <div class="info-value" id="createTime">@(Model?.CreateTime?.ToString("yyyy-MM-dd HH:mm:ss") ?? "-")</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">调拨类型</div>
                        <div class="info-value" id="transferType">@(Model?.TransferType ?? "-")</div>
                    </div>
                </div>

                <div class="info-row">
                    <div class="info-item">
                        <div class="info-label">调拨申请日期</div>
                        <div class="info-value" id="tfrrqdt">@(Model?.Tfrrqdt?.ToString("yyyy-MM-dd") ?? "-")</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">经办人</div>
                        <div class="info-value" id="handlerName">@(Model?.HandlerName ?? "-")</div>
                    </div>
                </div>

                <div class="info-row">
                    <div class="info-item">
                        <div class="info-label">调出仓库</div>
                        <div class="info-value" id="outWarehouseName">@(Model?.OutWarehouseName ?? "-")</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">调入仓库</div>
                        <div class="info-value" id="inWarehouseName">@(Model?.InWarehouseName ?? "-")</div>
                    </div>
                </div>

                <div class="info-row">
                    <div class="info-item">
                        <div class="info-label">备注</div>
                        <div class="info-value" id="noteContent">@(string.IsNullOrEmpty(Model?.Note) ? "无备注" : Model.Note)</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">单据状态</div>
                        <div class="info-value">
                            <span class="status-tag" id="documentStatusTag">@GetDocumentStatusText(Model?.DocumentStatus)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 设置状态标签样式
            setStatusTagStyle();

            // 绑定事件（判断元素存在再绑定，避免null错误）
            // 1. 打印按钮
            const printBtn = document.getElementById('printBtn');
            if (printBtn) {
                printBtn.addEventListener('click', handlePrint);
            }
            // 2. 新增：返回列表按钮（跳转至TransferOrder/Index）
            const returnListBtn = document.getElementById('returnListBtn');
            if (returnListBtn) {
                returnListBtn.addEventListener('click', function() {
                    window.location.href = '/TransferOrder/Index';
                });
            }
            // 3. 原有审核按钮
            const auditBtn = document.getElementById('auditBtn');
            if (auditBtn) {
                auditBtn.addEventListener('click', handleAudit);
            }

            // 显示主内容，隐藏加载框
            document.getElementById('transferCard').style.display = 'block';
            document.getElementById('loadingMask').style.display = 'none';
        });

        // 设置状态标签样式
        function setStatusTagStyle() {
            const documentStatusTag = document.getElementById('documentStatusTag');
            if (documentStatusTag) {
                const status = '@Model?.DocumentStatus';
                documentStatusTag.className = `status-tag status-${getStatusType(status)}`;
            }
        }

        // 状态类型映射
        function getStatusType(status) {
            const map = { '0': 'draft', '1': 'pending', '2': 'rejected', '3': 'approved', '4': 'completed' };
            return map[status] || 'default';
        }

        // 打印功能
        function handlePrint() {
            window.print();
        }

        // 审核功能
        function handleAudit() {
            const appElement = document.getElementById('app');
            const id = appElement ? appElement.getAttribute('data-transfer-order-id') : null;

            if (id && id !== '0' && confirm('确定要审核通过该调拨单吗？')) {
                fetch('/TransferOrder/Audit', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ id: parseInt(id) })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('审核成功');
                        location.reload();
                    } else {
                        alert('审核失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('审核请求失败');
                });
            } else {
                alert('无效的调拨单ID');
            }
        }
    </script>
}

<style>
    /* 基础样式 */
    .transfer-detail {
        padding: 20px;
        background-color: #f9fafb;
        min-height: 100vh;
        box-sizing: border-box;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    /* 加载状态 */
    .loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .loading-content {
        font-size: 18px;
        color: #606266;
    }

    /* 错误提示 */
    .alert {
        padding: 12px 16px;
        border-radius: 4px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .alert-error {
        background-color: #fef0f0;
        border: 1px solid #fde2e2;
        color: #f56c6c;
    }

    .alert-message {
        flex: 1;
    }

    .alert-close {
        background: none;
        border: none;
        color: #f56c6c;
        font-size: 16px;
        cursor: pointer;
        padding: 0 4px;
    }

    /* 卡片样式 */
    .card {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

    /* 头部样式 */
    .header-container {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .order-info {
        flex: 1;
    }

    .order-no {
        font-size: 16px;
        font-weight: 500;
    }

    .label {
        color: #606266;
        margin-right: 8px;
    }

    .value {
        font-weight: 600;
        color: #1f2329;
    }

    .header-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* 基础信息区域 */
    .base-info {
        margin-bottom: 20px;
    }

    .info-section {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        padding: 15px;
    }

    .info-row {
        display: flex;
        margin-bottom: 15px;
        align-items: center;
    }

    .info-item {
        flex: 1;
        display: flex;
        align-items: center;
        min-height: 32px;
    }

    .info-label {
        color: #606266;
        font-weight: 500;
        width: 120px;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .info-value {
        color: #303133;
        flex: 1;
    }

    /* 状态标签 */
    .status-tag {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
    }

    .status-draft {
        background-color: #e8f4fd;
        color: #409eff;
    }

    .status-pending {
        background-color: #fdf6ec;
        color: #e6a23c;
    }

    .status-approved {
        background-color: #f0f9eb;
        color: #67c23a;
    }

    .status-rejected {
        background-color: #fef0f0;
        color: #f56c6c;
    }

    .status-completed {
        background-color: #f0f5ff;
        color: #1890ff;
    }

    .status-default {
        background-color: #f4f4f5;
        color: #909399;
    }

    /* 按钮样式 */
    .btn {
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        min-width: 80px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-primary {
        background-color: #409eff;
        color: #fff;
    }

        .btn-primary:hover {
            background-color: #66b1ff;
        }

    .btn-default {
        background-color: #f5f7fa;
        color: #606266;
        border: 1px solid #dcdfe6;
    }

        .btn-default:hover {
            background-color: #e9e9eb;
        }
</style>

@functions {
    // 获取单据状态文本
    private string GetDocumentStatusText(string status)
    {
        if (string.IsNullOrEmpty(status)) return "未知";
        var statusMap = new Dictionary<string, string>
        {
            {"0", "草稿"}, {"1", "待审核"}, {"2", "驳回"}, {"3", "通过"}, {"4", "已完成"}
        };
        return statusMap.TryGetValue(status, out var text) ? text : $"未知({status})";
    }
}